<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Visualizations - Geometry</title>

<!--css-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/viz.css">

<link rel="stylesheet" href="css/geometry.css">

<!--js-->
<script src="js/external/jquery-1.10.2.js"></script>
<script src="js/external/jquery-ui.js"></script>
<script src="js/external/d3.v3.js"></script>
<script src="js/viz.js"></script>
<script src="js/common.js"></script>
<script src="js/actions/geometry_actions.js"></script>
<script src="//connect.facebook.net/en_US/all.js"></script>
<!-- more scripts are below-->

<!--fonts-->
<link href="fonts/silkscreen/stylesheet.css" rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

</head>

<body>

<div id="top-bar">
	<a id="home" href="index.html">we<span class="colour">need</span>a<span class="colour">name</span></a>
    <span id="title">
    	<a class="selected-viz">Geometry</a>
    </span>
    <a id="fb-login" href="#" target="_blank">Facebook connect</a>
    <span id="trick">
		<fb:login-button show-faces="false" width="200" max-rows="1" style="float: right; margin-top: 9px;"></fb:login-button>
    </span>
    <div id="mode-menu">
    	<div id="mode-button">Exploration Mode<img src="http://rosemarietan.com/fyp/img/arrow_white.png" alt="Home"/></div>
        <div id="other-modes">
            <a href="#">Tutorial Mode</a>
            <!--<a href="#">Training Mode</a>--> <!--under construction-->
        </div>
    </div>
</div>

   
    <div id="viz"></div>

    <div id="current-action" class="panel"><p></p></div>
    
    <div id="actions" class="panel" style="height:164px">
        <p id="clear" class="execAction" onclick=clearScreen()>Clear</p>
		<p id="perimeter" class="execAction" onclick=perimeter()>Perimeter</p>
		<p id="is_convex" class="execAction" onclick=isConvex()>isConvex</p>
        <p id="cut_polygon" class="execAction" onclick=cutPolygon()>Cut polygon</p>
        <p id="point_inside" class="execAction" onclick=checkPointInsidePolygon()>Check point inside</p>
        <p id="graham">Graham Scan</p>
	</div>
    <div id="actions-hide" class="panel-hide" style="height:35px"><img src="img/arrow_white_right.png" title="show/hide actions panel"/></div>
    <div id="actions-extras">
    <!--put all the extra action pullouts (input) and error messages here-->
        <div id="graham-go" class="execAction" onclick=goGrahamScan()><p>GO</p></div>
        
    </div>
    <div id="status" class="panel"><p></p></div>
    <div id="status-hide" class="panel-hide"><img src="img/arrow_white_right.png" title="show/hide status panel"/></div>
    
    <div id="codetrace" class="panel">
    	<!--can add class "highlighed" to hightlight one line-->
    	<p id="code1" style="padding-top: 10px;"></p>
        <p id="code2"></p>
        <p id="code3"></p>
		<p id="code4"></p>
		<p id="code5"></p>
		<p id="code6"></p>
		<p id="code7" style="padding-bottom: 10px;"></p>
    </div>
    <div id="codetrace-hide" class="panel-hide"><img src="img/arrow_white_right.png" title="show/hide codetrace panel"/></div>
    

<div id="left-bar"></div>
<div id="right-bar"></div>
<!-- Bottom bar and overlay popups -->
<div id="bottom-bar">
	<a id="trigger-about">About</a>
    <a id="trigger-team">Team</a>
    <a id="trigger-terms">Terms of use</a>
</div>

<div id="media-controls">
    <div id="speed-control">slow<div id="speed-input"></div>fast</div>
    <span id="go-to-beginning" class="media-control-button" title="go to beginning" onclick=goToBeginning()><img src="img/goToBeginning.png" alt="go to beginning" /></span>
    <span id="previous" class="media-control-button" title="step backward" onclick=stepBackward()><img src="img/prevFrame.png" alt="previous frame" /></span>
    <span id="pause" class="media-control-button" title="pause" onclick=pause()><img src="img/pause.png" alt="pause" /></span>
    <span id="play" class="media-control-button" title="play" onclick=play()><img src="img/play.png" alt="play" /></span>
    <span id="next" class="media-control-button" title="step forward" onclick=stepForward()><img src="img/nextFrame.png" alt="next frame" /></span>
    <span id="go-to-end" class="media-control-button" title="go to end" onclick=goToEnd()><img src="img/goToEnd.png" alt="go to end"/></span>
    <div id="progress-bar" class="media-control-button"></div>
</div>

<div id="dark-overlay"></div>
<div id="about" class="overlays"></div>
<div id="team" class="overlays"></div>
<div id="termsofuse" class="overlays"></div>

<script src="js/graph_library/constant.js"></script>
<script src="js/graph_library/properties.js"></script>
<script src="js/graph_library/helperObjects.js"></script>
<script src="js/graph_library/misc.js"></script>
<script src="js/graph_library/Widget.js"></script>
<script src="js/graph_library/GraphWidget.js"></script>
<script src="js/graph_library/GraphVertexWidget.js"></script>
<script src="js/graph_library/GraphEdgeWidget.js"></script>
<script src="js/widgets/GeometryWidget.js"></script>
<script type="text/javascript">
	//start by showing actions panel
	//enableActionsOnly();
	$('#play').hide();

	var GeometryWidget = new Geometry();
		
	//showTree();

	$('#graham').click(function() {
        GeometryWidget.initGrahamScan();
        openGrahamScan();
    });
	
    function clearScreen() {
        if (isPlaying) stop();
        GeometryWidget.clrscr();
        closeGrahamScan();
    }

    function perimeter() {
        if(isPlaying) { stop(); }
        var gw = GeometryWidget.getGraphWidget();
        isPlaying = true;
        closeGrahamScan();
        setTimeout( function() {
            if ((mode=="exploration")&&GeometryWidget.findPerimeter()) {
                $('#current-action').show();
                $('#current-action p').html("Find perimeter");
                $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                triggerRightPanels();
                isPlaying = true;
            }
        }, 500);
    }

    function isConvex() {
        if(isPlaying) { stop(); }
        var gw = GeometryWidget.getGraphWidget();
        isPlaying = true;
        closeGrahamScan();
        setTimeout( function() {
            if ((mode=="exploration")&&GeometryWidget.isConvex()) {
                $('#current-action').show();
                $('#current-action p').html("Check convex");
                $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                triggerRightPanels();
                isPlaying = true;
            }
        }, 500);   
    }

    function goGrahamScan() {
        if(isPlaying) { stop(); }
        //clearScreen();
        isPlaying = true;
        var gw = GeometryWidget.getGraphWidget();
        setTimeout( function() {
            if ((mode=="exploration")&&GeometryWidget.grahamScan()) {
                $('#current-action').show();
                $('#current-action p').html("Graham scan");
                $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                closeGrahamScan();
                triggerRightPanels();
                isPlaying = true;
            }
        }, 500);      
    }

    function checkPointInsidePolygon() {
        if (isPlaying) { stop(); }
        var gw = GeometryWidget.getGraphWidget();
        isPlaying = true;
        closeGrahamScan();
        setTimeout( function() {
            if ((mode=="exploration")&&GeometryWidget.checkPointInsidePolygon()) {
                /*
                $('#current-action').show();
                $('#current-action p').html("Check point is inside polygon");
                $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                triggerRightPanels();
                isPlaying = true;*/
                $('#current-action').show();
                $('#current-action p').html("Click to draw your point");
            }
        }, 500); 
    }

    function cutPolygon() {
        if (isPlaying) { stop(); }
        var gw = GeometryWidget.getGraphWidget();
        isPlaying = true;
        closeGrahamScan();
        setTimeout( function() {
            if ((mode=="exploration")&&GeometryWidget.doCutPolygon()) {
                /*
                $('#current-action').show();
                $('#current-action p').html("Check point is inside polygon");
                $('#progress-bar').slider( "option", "max", gw.getTotalIteration()-1);
                triggerRightPanels();
                isPlaying = true;*/
                $('#current-action').show();
                $('#current-action p').html("Click to draw your 2 points");
            }
        }, 500); 

    }


    var isPaused = false;
    function isAtEnd() {
        var gw = GeometryWidget.getGraphWidget();
        return (gw.getCurrentIteration()==(gw.getTotalIteration()-1));
    }
    
    function pause() {
        var gw = GeometryWidget.getGraphWidget();
        if(isPlaying) {
            isPaused = true;
            gw.pause();
            $('#play').show();
            $('#pause').hide();
        }
    }
    function play() {
        var gw = GeometryWidget.getGraphWidget();
        if(isPlaying) {
            isPaused = false;
            $('#pause').show();
            $('#play').hide();
            if(isAtEnd()) {
                gw.replay();
            } else {
                gw.play();
            }
        }
    }
    function stepForward() {
        var gw = GeometryWidget.getGraphWidget();
        if(isPlaying) {
            pause();
            gw.forceNext(250);
        }
    }
    function stepBackward() {
        var gw = GeometryWidget.getGraphWidget();
        if(isPlaying) {
            pause();
            gw.forcePrevious(250);  
        }
    }
    function goToBeginning() {
        var gw = GeometryWidget.getGraphWidget();
        if(isPlaying) {
            gw.jumpToIteration(0,0);
            pause();
        }
    }
    function goToEnd() {
        var gw = GeometryWidget.getGraphWidget();
        if(isPlaying) {
            gw.jumpToIteration(gw.getTotalIteration()-1,0);
            pause();
        }
    }
    function stop() {
        var gw = GeometryWidget.getGraphWidget();
        try {
            gw.stop();
        } catch(err) {}
        isPaused = false;
        isPlaying = false;
        $('#pause').show();
        $('#play').hide();
    }

    //shortcut keys for playback controls
    $(document).keydown( function(event) {
        var gw = GeometryWidget.getGraphWidget();
        if(event.which == 32) { //spacebar
            if(isPaused) { play(); } else { pause(); }
        } else if(event.which == 37) { //left arrow
            stepBackward();
        } else if(event.which == 39) { //right arrow
            stepForward();
        } else if(event.which == 35) { //end
            stop();
        } else if (event.which == 189) { //minus
            var d = (2200-gw.getAnimationDuration())-100;
            if(d > 0) {
                $("#speed-input").slider("value", d);
            } else {
                $("#speed-input").slider("value", 0);
            }
        } else if (event.which == 187) { //plus
            var d = (2200-gw.getAnimationDuration())+100;
            if(d <= 2000) {
                $("#speed-input").slider("value", d);
            } else {
                $("#speed-input").slider("value", 2000);
            }
        }
    });
    
    //sliders
    $("#speed-input").slider({
        min: 200,
        max: 2000,
        value: 1700,
        change: function(event, ui) {
            var gw = GeometryWidget.getGraphWidget();
            gw.setAnimationDuration(2200-ui.value);
        }
    });
    $("#progress-bar").slider({
        range: "min",
        min: 0,
        value: 0,
        slide: function(event, ui) {
            var gw = GeometryWidget.getGraphWidget();
            gw.pause();
            gw.jumpToIteration(ui.value,0);
        },
        stop: function(event, ui) {
            var gw = GeometryWidget.getGraphWidget();
            if(!isPaused) { setTimeout( function(){gw.play();}, 500) }
        }
    });
</script>

</body>
</html>